<template>
  <view class="order_content" :style="'padding-top: ' + menuButton.bottom + 'px'">
    <Head title="订单列表" :transparent="false">
      <!-- <text slot="action">搜索</text> -->
    </Head>
    <view class="order_box">
      <view class="order_item" v-for="(item, index) in itemList" :key="index" @click="goDetail(item)">
        <view class="item_info">
          <!-- 主图 -->
          <view class="img">
            <ImageLoad :src="item.itemImg" mode="widthFix"/>
          </view>
          <view class="text_box">
            <view class="title">{{item.itemTitle}}</view>
            <view class="order_id">店铺名称:{{item.sellerShopTitle}}</view>
            <view class="status">
              <text class="tag paid" v-if="item.tkStatus === 12">已付款</text>
              <text class="tag closed" v-if="item.tkStatus === 13">订单关闭</text>
              <text class="tag settled" v-if="item.tkStatus === 14">已收货</text>
              <text class="tag settled" v-if="item.tkStatus === 3">已结算</text>
            </view>
          </view>
        </view>
        <view class="return_info">
          <view class="return_item">
            <view class="title">付款金额</view>
            <view class="price">{{item.alipayTotalPrice}}</view>
          </view>
          <view class="return_item">
            <view class="title">付款预估返还积分</view>
            <view class="price">{{toIntFun(item.pubSharePreFee)}}</view>
          </view>
          <view class="return_item" v-if="item.tkStatus === 3">
            <view class="title">结算金额</view>
            <view class="price">{{item.payPrice}}</view>
          </view>
          <view class="return_item" v-if="item.tkStatus === 3">
            <view class="title">结算实际返还积分</view>
            <view class="price">{{item.returnGold}}</view>
          </view>
        </view>
        <view class="settle_date">
          <view class="pay">{{item.tbPaidTime}}付款</view>
          <view class="return" v-if="item.tkStatus === 3">{{item.tkEarningTime}}结算</view>
        </view>
      </view>
    </view>
    <view class="cu-load bg-grey" v-if="isLoad" :class="finished?'over':'loading'"></view>
    <NoData v-if="!isLoad && itemList && itemList.length <= 0">
      <view slot="text">抱歉,未找到订单</view>
    </NoData>
    <ScrollToTop :scrollTop="scrollTop" />
    <!-- 创建订单按钮 -->
    <text class="add_btn iconfont icon-jiahao" @click="showAdd" :class="scrollTop > 400 ? 'add_btn_hide' : ''"></text>
    <!-- 绑定订单模态框 -->
    <BindOrder ref="addOrderPop"/>
  </view>
</template>

<script>
  import Head from '@/pages/pagecomponents/head'
  import NoData from '@/pages/pagecomponents/nodata'
  import ScrollToTop from '@/pages/pagecomponents/other/scrolltotop'
  import BindOrder from './components/bindorder'
  import ImageLoad from '@/pages/pagecomponents/other/imageload'
  export default {
    components: {
      Head,
      NoData,
      ScrollToTop,
      BindOrder,
      ImageLoad,
    },
    data() {
      return {
        menuButton: this.menuButton,
        param: {
          pageNo: 1,
          pageSize: 10,
        },
        itemList: [],
        isLoad: false,
        finished: false,
        scrollTop: 0, // 页面滚动高度
      }
    },
    computed:{
      isDev(){
        return this.$store.state.isDev
      },
      userInfo(){
        return this.$store.state.userInfo
      },
    },
    onPageScroll(e) {
      // 滚动条滚动
      this.scrollTop = e.scrollTop
    },
    onPullDownRefresh() {
      // 下拉刷新
      this.getItemList('pullDown')
    },
    onLoad() {
      this.getItemList()
    },
    methods: {
      showAdd() {
        // #ifdef MP-WEIXIN || MP-TOUTIAO
        if (this.isDev !== 'release') {
          return
        }
        // #endif
        this.$refs.addOrderPop.show();
      },
      nextPaging() {
        // 下一页
        if (this.finished !== true) {
          this.param.pageNo += 1
          this.getItemList()
        }
      },
      getItemList(type) {
        if (type === 'pullDown') {
          // 下拉刷新
          this.itemList = []
          this.param.pageNo = 1
          this.param.pageSize = 10
        }
        this.isLoad = true
        this.$api.user.pagingOrderList(this.param).then(res => {
          if (type === 'pullDown') {
            // 下拉刷新
            uni.stopPullDownRefresh();
          }
          this.isLoad = false
          // this.cashgiftList = res.data.list

          if (res.data.list && res.data.list.length <= 0) {
            this.finished = true;
          } else {
            let itemList = res.data.list
            let orderList = this.itemList
            orderList = orderList.concat(itemList)
            this.itemList = orderList
          }
        }).catch(err => {
          this.isLoad = false
          this.finished = true;
        })
      },
      goDetail(item) {
        uni.navigateTo({
          url: `/pages/itemdetail/index?goodsId=${item.goodsId}`
        });
      },
      toIntFun(num){ // 如果为0，则展示1
        let result = Math.ceil(num * this.userInfo.level * 0.2 * 10)
        return result ? result : 1
      },
    }
  }
</script>

<style scoped lang="scss">
  .order_content {
    position: relative;
    min-height: 100%;
    margin-top: var(--status-bar-height);
    padding: 50px 40upx 100upx;
    .order_box {
      .order_item {
        box-shadow: 0px 20upx 40upx 0px rgba(0, 0, 0, 0.1);
        border-radius: 10upx;
        background: #ffffff;
        margin-top: 20upx;
        padding: 20upx;
        .item_info {
          .img {
            display: inline-block;
            width: 150upx;
            height: 150upx;
            border-radius: 10upx;
            overflow: hidden;
          }
          .text_box {
            vertical-align: top;
            display: inline-block;
            margin-left: 20upx;
            line-height: 50upx;
            width: calc(100% - 170upx);
            font-size: 25upx;
            .title {
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .order_id{
              color: #b1b6bd;
            }
            .status{
              color: #ffffff;
              .tag{
                padding: 0 10upx;
                display: inline-block;
                border-radius: 40upx;
              }
              .paid{
                background-color: #294d7d;
              }
              .closed{
                background-color: #afb2b7;
              }
              .settled{
                background-color: #1aad19;
              }
            }
          }
        }
        .return_info{
          margin-top: 20upx;
          .return_item{
            width: 50%;
            text-align: center;
            display: inline-block;
            .title{
              font-size: 25upx;
              line-height: 40upx;
            }
            .price{
              font-size: 30upx;
              line-height: 40upx;
              font-weight: 600;
            }
          }
        }
        .settle_date{
          margin-top: 20upx;
          font-size: 23upx;
          text-align: right;
          color: #b1b6bd;
          .pay, .return{
            display: inline-block;
            height: 30upx;
            width: 50%;
            text-align: left;
          }
          .return{
            text-align: right;
          }
        }
      }
    }
    .add_btn{
      position: fixed;
      display: block;
      text-align: center;
      right: 80upx;
      bottom: 80upx;
      border-radius: 50%;
      width: 100upx;
      height: 100upx;
      line-height: 100upx;
      font-size: 45upx;
      color: #ffffff;
      background: #1aad19;
      opacity: 1;
      transition: all .5s;
    }
    .add_btn_hide {
      opacity: 0;
      bottom: -120upx;
    }
  }
</style>
